
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>zmall网上商城-商店系统</title>
<meta name="author" content="DeathGhost" />
<link rel="stylesheet" type="text/css" href="goodsmanage/css/style.css">
<link rel="stylesheet" href="goodsmanage/layui/css/layui.css">
<style>
.head {
	height: 70px;
}

.title {
	position: absolute;
	width: 200px;
	left: 15px;
	height: 75px;
	color: white;
	line-height: 75px;
	font-size: 30px;
}
</style>
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<![endif]-->
<script src="goodsmanage/js/jquery.js"></script>
<script src="goodsmanage/js/jquery.mCustomScrollbar.concat.min.js"></script>
<script>

	(function($) {
		$(window).load(
			function() {

				$("a[rel='load-content']").click(
					function(e) {
						e.preventDefault();
						var url = $(this).attr("href");
						$.get(url, function(data) {
							$(".content .mCSB_container").append(data); //load new content inside .mCSB_container
							//scroll-to appended content 
							$(".content").mCustomScrollbar("scrollTo","h2:last");
						});
					});
		
		
				$(".content").delegate(
					"a[href='top']",
					"click",
					function(e) {
						e.preventDefault();
						$(".content").mCustomScrollbar("scrollTo",
						$(this).attr("href"));
					});

			});
	})(jQuery);
	
</script>

</head>
<body>
	<!--header-->
	<header class="head">
		<div class="title">zmall网上商城</div>
		<ul class="rt_nav">
			<li><a href="UserLogin.jsp" class="quit_icon">退出</a></li>
		</ul>
	</header>
	<!--aside nav-->
	<!--aside nav-->
	<aside class="lt_aside_nav content mCustomScrollbar">
		<h2>
			<a href="StoreIndex.jsp">首页</a>
		</h2>
		<ul>
			<li>
				<dl>
					<dt>商品管理</dt>
					<!--当前链接则添加class:active-->
					<dd>
						<a href="product_list.jsp" class="active">商品列表</a>
					</dd>
				</dl>
			</li>
			<li>
				<dl>
					<dt>订单管理</dt>
					<dd>
						<a href="order_list.jsp">订单列表</a>
					</dd>
				</dl>
			</li>
			<li>
				<dl>
					<dt>评论管理</dt>
					<dd>
						<a href="comment_list.jsp">查看评论</a>
					</dd>
				</dl>
			</li>
		</ul>
	</aside>
	<!-- 中间部分 -->
	<section class="rt_wrap content mCustomScrollbar">
		<!-- 中间内容 -->
		<div class="rt_content">
			<div class="page_title">
				<!-- 小标题 -->
				<h2 class="fl">商品列表</h2>
				<!-- 添加页面超链接 -->
				<a href="product_add.jsp" class="fr top_rt_btn add_icon">添加商品</a>
			</div>
			<!-- 搜索功能模块 -->
			<section class="mtb">
				<!-- 搜索表单 -->
				<form class="layui-form" action="GoodsManageServlet" method="post">
					<!-- op和商店登陆id存放 -->
					<input type="hidden" id="op" name="op" value="querylikes">
					<!-- value="${sessionScope.shopid}" -->
					<input type="hidden" id="shopid" name="shopid" value="${sessionScope.shopid}"> 
					<!-- ${keywords} 传送 keywords (基于商品名称的模糊搜索)-->
					<input type="text" class="keywords textbox textbox_225" name="keywords" placeholder="输入商品名称" value="${keywords}" />
					<input type="submit" value="查询" class="group_btn" />
				</form>
				${msg == null ? "" : msg }
			</section>
			<!-- 显示商店商品的列表 -->
			<table class="table">
				<!-- 列表表头 -->
				<thead>
					<tr>
						<th>商品编号</th>
						<th>缩略图</th>
						<th>商品名称</th>
						<th>商品单价</th>
						<th>商品简介</th>
						<th>商品库存</th>
						<th>商品类型</th>
						<th>商品状态</th>
						<th>操作</th>
					</tr>
				</thead>
				<!-- 表身 -->
				<tbody>
					<!-- servlet传输过来的值为空时 -->
					<c:if test="${goodsP==null}">
						<!-- c:redirect 跳转到 GoodsManageServlet ${shopid}-->
						<c:redirect url="GoodsManageServlet?op=queryByPage&shopid=${sessionScope.shopid}"></c:redirect>
					</c:if>
					<!-- servlet传输过来的值不为空时 -->
					<c:if test="${goodsP!=null}">
						<!-- 把数据遍历到table中 -->
						<c:forEach items="${goodsP.data }" var="goods">
							<tr class="center">
								<td >${goods.goodsid}</td><!-- 商品id -->
								<td >
									<!-- 显示商品图片  -->
									<img class="src" src="${goods.cover}" width="50" height="50" />
									<!-- 存储图片地址,用于修改时调取 -->
									<div id="td02" class="td02">
										<input type="hidden" value="${goods.cover}">
									</div>
								</td>
								<td>${goods.goodsname}</td><!--商品名称  -->
								<td >
									<!-- <strong class="rmb_ice>加粗并添加货币符号和样式</strong>" -->
									<strong class="rmb_icon">${goods.goodsprice}</strong><!-- 商品价格 -->
									<div id="td04" class="td04">
										<input type="hidden" value="${goods.goodsprice}">
									</div>
								</td>
								<td >${goods.goodsinfo}</td><!-- 商品介绍 -->
								<td >${goods.goodscount}</td><!-- 商品数量 -->
								<td >
									<p class="center">${goods.type.typename}</p><!-- 商品类型名称 -->
									<!-- 存储类型id用于后面的其他操作 -->
									<div id="td07" class="td06">
										<input type="hidden" value="${goods.type.typeid}">
									</div>
								</td>
								<!-- 商品状态 -->
								<td >
									<p class="center">
										<!-- 根据传输进来的值显示对应文字 -->
										<c:if test="${goods.goodsstate==0}">上架中</c:if>
										<c:if test="${goods.goodsstate==1}">下架中</c:if>
									</p>
									<!-- 存储商品状态值用于其他功能的实现 -->
									<div id="td07" class="td07">
										<input type="hidden" value="${goods.goodsstate}">
									</div>
								</td>
								<!-- 操作功能位置 -->
								<td >
									<a href="#" title="编辑" class="upGoods link_icon">&#101;</a>
									<a href="#" title="删除" class="delGoods link_icon">&#100;</a>
								</td>
							</tr>
						</c:forEach>
					</c:if>
				</tbody>
				
			</table>
			<!-- 分页 -->
			<aside class="paging">
				<div id="pagediv" style="text-align: center"></div>
			</aside>
		</div>
</section>
<script type="text/javascript" src="goodsmanage/javascript/jquery.min.js"></script>
<script type="text/javascript" src="goodsmanage/layui/layui.js"></script>
<script src="goodsmanage/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="goodsmanage/javascript/goods.js"></script>

<script>
/**$(function() {

		//得到一个对象，或者多个对象，将对象显示层中
		$.get("GoodsManageServlet?op=doType", function(data) {
			//测试控制台没有问题
			//不用JSON.parse可以不?
			// console.log(data);
			//遍历 jQuery的遍历怎么走吗？
			$.each(data, function(index, nt) {
				 //console.log(index+","+nt.id+","+nt.newstype);
				$("#typeid").append(
						"<option value="+nt.typeid+">" + nt.typename + "</option>");
			});
		});
	});
	
	*/
//分页功能模块	
layui.use(['laypage', 'layer'], function(){
  var laypage = layui.laypage
  ,layer = layui.layer;
  
//完整功能
  laypage.render({
    elem: 'pagediv' // 分页的导航在哪里显示，pagediv是层id
    ,theme: '#428bca'  //颜色
    ,count: ${goodsP.totalCount} //总记录数
    ,curr: ${goodsP.page}  //当前页
    ,limit: ${goodsP.pageSize}//当前页显示的记录数
    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
    ,jump: function(obj, first){ //跳转页面时候的动作
	    //obj包含了当前分页的所有参数，比如：
	    // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
	   // console.log(obj.limit); //得到每页显示的条数
	    
	    //首次不执行
	    if(!first){
	      //do something
	       location.href="GoodsManageServlet?op=queryByPage&page="+obj.curr+"&pageSize="+obj.limit+"&shopid="+$("#shopid").val();
	    }
	  }
  });
//给删除超链接设置了类class,作用希望我们可以定位a标签，同时完成其单击事件
  $(".delGoods").click(function(){
	  //单击事件的代码	  
	  //0得到这行 的第一个td中的goodsid的值,我们使用js(jq)的一些方法来操作页面元素
	  //$(this).parents("tr") 当前行
	  //find("td") 这个tr下的所有td
	  //eq(0) 所有td中的第一个
	  //text() ->innerText td中的文本内容
	  var goodsid = $(this).parents("tr").find("td").eq(0).text();
	  //1 提 示用户是否删除?打算使用layui的layer组件弹窗提示
	//询问框
		console.log(goodsid);
	  layer.confirm('是否确定删除编号为'+goodsid+"的商品", {
	    btn: ['确定','取消'] //按钮
	  }, function(){
	    //layer.msg('确定的时候要执行的代码', {icon: 1});
	    //真的删除
	    //1 url传值，页面条状  2 ajax请求
	    $.ajax({
	    	//参数
	    	url: "GoodsManageServlet",
	    	type: "post",
	    	data:{
	    		goodsid: goodsid,
	    		op: "del"
	    	},
	    	success: function(res){
	    		//判断返回值的结果，根据结果做提示以及后续的页面刷新操作
	    		if(res.msg == "true")
	    			{
	    			
	    			layer.msg('删除成功!', {
	    				icon: 1,
	    			    time: 2000, //2s后自动关闭
	    			    btn: ['确定']
	    			  },function(){
	    				  
	    				  //页面刷新
	    				  location.href="GoodsManageServlet?op=queryByPage&page="+${goodsP.page}+"&pageSize="+${goodsP.pageSize}+"&shopid="+$("#shopid").val();	    				  
	    			  });	    					    			
	    			}
	    		else{
	    			
	    			layer.msg('删除失败!', {
	    				icon: 1,
	    			    time: 2000, //2s后自动关闭
	    			    btn: ['确定']
	    			  });
	    			
	    		}
	    		
	    	},
	    	dataType: "json"
	    	
	    	
	    	
	    });
	  });		  
			  
			  
	  
	  
  });
  /**********删除结束********/

/***********修改开始******/
  
  $(".upGoods").click(function(){
	  
	  //得到类型的typeid
	  var goodsid=$(this).parents("tr").find("td").eq(0).text();
	  var cover=$(this).parents("tr").find('.td02 input[type="hidden"]').val();
	  var goodsname=$(this).parents("tr").find("td").eq(2).text(); 	  
	  var goodsprice=$(this).parents("tr").find('.td04 input[type="hidden"]').val();
	  var goodsinfo=$(this).parents("tr").find("td").eq(4).text();
	  var goodscount=$(this).parents("tr").find("td").eq(5).text();
		//获取tr 中    hidden中的值
	  var typeid=$(this).parents("tr").find('.td06 input[type="hidden"]').val();
	  var goodsstate=$(this).parents("tr").find('.td07 input[type="hidden"]').val();
	  
	  console.log(goodsid);
	  console.log(cover);
	  console.log(goodsname);
	  console.log(goodsprice);
	  console.log(goodsinfo);
	  console.log(goodscount);
	  console.log(typeid);
	  console.log(goodsstate);

	  
	  
	  $("#goodsid").val(goodsid);
	  $("#cover").val(cover);
	  $("#goodsname").val(goodsname);
	  //$("#typename").val(typename);
	  $("#goodsprice").val(goodsprice);
	  $("#goodsinfo").val(goodsinfo);
	  $("#goodscount").val(goodscount);
	  $("#goodsstate").val(goodsstate);
	  
	  
	
	//弹出层
	  layer.open({
		  type: 1,
		  area: ['600px', '500px'],
		  content: $('#updatediv') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
		});
	  
	  
   });
  
 
  
  
  
  });
  
  
  /*********修改结束*******/
</script>
	<div id="updatediv" style="display: none; width: 500px">

		<form class="layui-form" action="GoodsManageServlet" method="post" enctype="multipart/form-data">
			<input type="hidden" name="op" value="upGoods"> 
			<input type="hidden" name="shopid" value="${sessionScope.shopid}">

			<div style="height: 40px; margin-left: 45%;">
				<h2>修改商品信息</h2>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">商品编号</label>
				<div class="layui-input-block">
					<input type="text" name="goodsid" id="goodsid" required
						lay-verify="required" readonly class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">商品名称</label>
				<div class="layui-input-block">
					<input type="text" name="goodsname" id="goodsname" required
						lay-verify="required" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">商品类别</label>
				<div class="layui-input-block">
					<select name="typeid" id="typeid" lay-verify="required">
						<option value="">请选择</option>
						<option value="1">苹果系列</option>
						<option value="2">华为系列</option>

					</select>
				</div>
			</div>


			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">商品简介</label>
				<div class="layui-input-block">
					<textarea name="goodsinfo" id="goodsinfo" class="layui-textarea"></textarea>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">商品价格</label>
				<div class="layui-input-block">
					<input type="text" name="goodsprice" id="goodsprice" required
						lay-verify="required" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">商品库存</label>
				<div class="layui-input-block">
					<input type="text" name="goodscount" id="goodscount" required
						lay-verify="required" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">图片</label>
				<div class="layui-input-block">
					<!--  <input type="text" name="cover" id="cover" required
						lay-verify="required" class="layui-input">-->
					<input type="hidden" name="cover" id="cover" value="">
					<label class="uploadImg">
         				<input type="file" name="cover-file" id="cover-file" />
         				<span>上传图片</span>
       				 </label>
				</div>
				
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">商品状态</label>
				<div class="layui-input-block">
					<select name="goodsstate" lay-verify="required" id="goodsstate">

						<option value="0"
							<c:if test="${'0' eq goodsstate}">selected</c:if>>上架</option>
						<option value="1"
							<c:if test="${'1' eq goodsstate}">selected</c:if>>下架</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn tijiao" lay-filter="formDemo">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>

	<script>

//Demo
layui.use('form', function(){
  var form = layui.form;
  
  //监听提交
  form.on('submit(formDemo)', function(data){
    
	  //可以1 表单提交  2 可以用ajax
	  //得到了表单 中的数据,传递给servlet完成数据访问即可
	  //未完， 待  "大家" 续
	  
	  layer.msg(JSON.stringify(data.field));
    
    //return false是不做表单提交
    //return true;
  });
 
});

</script>

</body>
</html>